<div id="diagramCanvas" class="bpmn-io-viewer-height">
    <div id="diagramWarningText" style="display: none" class="alert alert-warning" role="alert"></div>
</div>


<script>
	document.addEventListener('DOMContentLoaded', function(){
	    renderDiagram();
	}, false);

    var RAW_BPMN_RESOURCE = `{{{resource}}}`;

    function renderDiagram() {
        if (RAW_BPMN_RESOURCE === 'WARNING-NO-XML-RESOURCE-FOUND') {
            let warningTextElement = document.getElementById('diagramWarningText');
            warningTextElement.appendChild(document.createTextNode('There was no process definition nor BPMN diagram found for this instance.'));
            warningTextElement.style.display = 'block';
        } else {
            renderBpmnDiagramFromXml(RAW_BPMN_RESOURCE)
        }
    }

  function renderBpmnDiagramFromXml(xmlString) {
      var BpmnViewer = window.BpmnJS;
      viewer = new BpmnViewer({container: '#diagramCanvas', width: '100%', height: '100%'});

      canvas = viewer.get('canvas');
      eventBus = viewer.get("eventBus");
      overlays = viewer.get("overlays");

      viewer.importXML(xmlString, function(err) {
			if (err) {
        showError("Diagram rendering: " + err);
			} else {
				addMarkers(viewer);
			}
		});

      var bpmnElementInfo = {};
      {{#instance.bpmnElementInfos}}
        bpmnElementInfo['{{elementId}}'] = '{{info}}';
      {{/instance.bpmnElementInfos}}

      var infoOverlayId;

      eventBus.on("element.hover", function(e) {
          var elementId = e.element.id;

          var info = bpmnElementInfo[elementId];
          if (info) {
              infoOverlayId = overlays.add(elementId, {
                  position: {
                      bottom: -5,
                      left: 0
                  },
                  html: '<div class="bpmn-info">' + info + '</div>'
              });
          }
      });

      eventBus.on("element.out", function(e) {
          if (infoOverlayId) {
              overlays.remove(infoOverlayId);
          }
      });
  }

  function addMarkers(viewer) {
  	var canvas = viewer.get('canvas');
		var overlays = viewer.get('overlays');
		var injector = viewer.get('injector');
		var elementRegistry = injector.get('elementRegistry');
		var graphicsFactory = injector.get('graphicsFactory');

		// zoom to fit full viewport
		canvas.zoom('fit-viewport');

		{{#instance.elementInstances}}
			addElementInstanceCounter(overlays, '{{elementId}}', {{activeInstances}}, {{endedInstances}});
		{{/instance.elementInstances}}

		{{#instance}}

			{{#activeActivities}}
				var elementId = "{{.}}";
				addElementInstanceActiveMarker(canvas, elementId);
			{{/activeActivities}}

			{{#incidentActivities}}
				var elementId = "{{.}}";
				addElementInstanceIncidentMarker(canvas,elementId);
			{{/incidentActivities}}

			{{#incidents}}
				{{^isResolved}}
					addIncidentMarker(overlays,'{{elementId}}');
				{{/isResolved}}
			{{/incidents}}

			{{#takenSequenceFlows}}
				var flow = "{{.}}";
				markSequenceFlow(elementRegistry, graphicsFactory, flow);
			{{/takenSequenceFlows}}

		{{/instance}}
  }

</script>
